<template>
  <div class="app-container">
    <el-card class="form-card">
      <div class="form-main">
        <div class="addtitle">
          {{ $route.query.id ? "修改" : "添加" }}个人客户
        </div>
        <div style="text-align: center" v-loading="Loading">
          <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item
              style="display: inline-block"
              label="客户经理"
              label-width="120px"
              prop="adminId"
            >
              <el-select
                style="width: 500px"
                v-model="form.adminId"
                placeholder="请选择客户经理"
                filterable
              >
                <el-option
                  v-for="item in managerList"
                  :key="item.id"
                  :label="item.name + ' ' + '(' + item.phone + ')'"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <div>
              <el-form-item
                label="办理业务员"
                style="display: inline-block"
                label-width="120px"
              >
                <el-select
                  clearable
                  style="width: 500px"
                  v-model="form.salesmanIds"
                  filterable
                  multiple
                  placeholder="请选择办理业务员"
                >
                  <el-option
                    v-for="item in managerList"
                    :key="item.id"
                    :label="item.name + ' ' + '(' + item.phone + ')'"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item
                label="来访日期"
                style="display: inline-block"
                label-width="120px"
                prop="visitTime"
              >
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  style="width: 500px"
                  v-model="form.visitTime"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
            </div>
            <div>
              <el-form-item
                label="姓名"
                style="display: inline-block"
                label-width="120px"
                prop="realname"
              >
                <el-input
                  clearable
                  maxlength="200"
                  :disabled="$route.query.id ? true : false"
                  style="width: 500px"
                  v-model="form.realname"
                  placeholder="请输入姓名"
                />
              </el-form-item>
            </div>
            <div>
              <el-form-item
                label="联系方式"
                label-width="120px"
                prop="phone"
                style="display: inline-block"
              >
                <el-input
                  style="width: 500px"
                  v-model="form.phone"
                  maxlength="11"
                  placeholder="请输入联系方式"
                />
              </el-form-item>
            </div>
            <div>
              <el-form-item
                label="业务类型"
                label-width="120px"
                prop="businessType"
                style="display: inline-block"
              >
                <el-select
                  style="width: 500px"
                  v-model="form.businessType"
                  placeholder="请选择业务类型"
                >
                  <el-option
                    v-for="item in businessTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item
                label="推荐产品"
                label-width="120px"
                prop="productId"
                style="display: inline-block"
              >
                <div style="">
                  <div class="product-img">
                    <div
                      class="product-img-box"
                      v-for="(item, idx) in form.productList"
                      :key="item.id"
                    >
                      <el-tooltip
                        effect="dark"
                        :content="item.name"
                        placement="top"
                      >
                        <img style="" :src="item.pic" />
                      </el-tooltip>

                      <i
                        @click="delProduct(idx, item.id)"
                        style="color: #ccc; font-weight: bold"
                        class="el-icon-close i2"
                      ></i>
                    </div>

                    <div style="line-height: 80px; margin-right: 10px">
                      <div class="uploadPic" @click="selectPic()">
                        <i
                          style="
                            font-size: 40px;
                            color: #ccc;
                            font-weight: bold;
                          "
                          class="el-icon-plus i1"
                        ></i>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- <el-select
                  style="width: 500px"
                  v-model="form.productId"
                  multiple
                  placeholder="请选择推荐产品"
                >
                  <el-option
                    v-for="item in recommendProductList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select> -->
              </el-form-item>
            </div>
            <div>
              <el-form-item
                style="display: inline-block"
                label="备注"
                label-width="120px"
                prop="note"
              >
                <el-input
                  type="textarea"
                  rows="4"
                  clearable
                  maxlength="200"
                  style="width: 500px"
                  v-model="form.note"
                  placeholder="请输入备注"
                />
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </el-card>
    <div
      style="
        background-color: #fff;
        width: calc(100% - 40px);
        height: 60px;
        line-height: 60px;
        position: absolute;
        bottom: 10px;
        text-align: center;
      "
    >
      <el-button style="" type="primary" @click="submitForm('formRef')"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import { valid } from "semver";
import {
  addCustomerPerson,
  editCustomerPerson,
  getCustomerPersonDetail
} from "@/api/customer";
import { getUserList } from "@/api/dept";
const form = {
  adminId: "",
  salesmanIds: "",
  visitTime: "",
  realname: "",
  phone: "",
  businessType: "",
  productId: [],
  note: ""
};
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3-9][0-9]\d{8}$/;
        // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
        if (reg.test(value)) {
          callback();
        } else {
          // 具体错误信息没有提示
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      form: Object.assign({}, form),
      Loading: false,
      rules: {
        adminId: [
          { required: true, message: "请选择客户经理", trigger: "change" }
        ],
        visitTime: [
          { required: true, message: "请选择来访日期", trigger: "change" }
        ],
        realname: [
          { required: true, message: "请输入姓名", trigger: "change" }
        ],
        phone: [
          { required: true, message: "请输入联系方式", trigger: "change" },
          { validator: checkPhone, trigger: "blur" }
        ],
        businessType: [
          { required: true, message: "请选择业务类型", trigger: "change" }
        ]
      },
      managerList: [],
      businessTypeList: [
        {
          name: "贷款业务",
          id: 1
        },
        {
          name: "孵化业务",
          id: 2
        }
      ],

      recommendProductList: [
        {
          name: "测试产品",
          id: 1
        },
        {
          name: "测试产品1",
          id: 2
        }
      ]
    };
  },
  async created() {
    this.getUserList();
    console.log(this.$route.meta.title);
    if (this.$route.query.id) {
      this.$route.meta.title = "编辑个人客户";
      this.Loading = true;
      getCustomerPersonDetail(this.$route.query.id)
        .then(res => {
          const productIds = res.data.productId.split(",").map(v => {
            return Number(v);
          });
          const salesmanIds = res.data.salesmanIds.split(",").map(v => {
            return Number(v);
          });
          this.form = res.data;
          this.form.productId = productIds;
          this.form.salesmanIds = salesmanIds;
          this.Loading = false;
        })
        .finally(() => {
          this.Loading = false;
        });
    } else {
      this.$route.meta.title = "添加个人客户";
    }
  },
  methods: {
    getUserList() {
      getUserList().then(res => {
        this.managerList = res.data.map(v => {
          return {
            name: v.nickName,
            id: v.adminId,
            phone: v.phoneNumber
          };
        });
      });
    },
    selectPic() {
      let that = this;
      console.log(that.form.productId);
      that.$modalGoodList(
        function(row) {
          console.log(row, "11");
          if (row) {
            that.$set(that.form, "productList", row);
            this.$set(
              that.form,
              "productId",
              row.map(v => {
                return v.id;
              })
            );
          }
        },
        "many",
        that.form.productId
      );
    },
    delProduct(idx, id) {
      this.form.productList.splice(idx, 1);
      const i = this.form.productId.findIndex(v => {
        return v === id;
      });
      if (i != -1) {
        this.form.productId.splice(i, 1);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.form);
          if (this.$route.query.id) {
            const params = {
              ...this.form,
              id: this.$route.query.id
            };
            params.productId = params.productId.join(",");
            params.salesmanIds = params.salesmanIds.join(",");
            editCustomerPerson(params).then(res => {
              this.$message.success("修改成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            });
          } else {
            const params = {
              ...this.form
            };
            params.productId = params.productId.join(",");
            params.salesmanIds = params.salesmanIds.join(",");
            addCustomerPerson(params).then(res => {
              this.$message.success("提交成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            });
          }
        } else {
          // return this.$message.error("请输入内容");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.form-card {
  height: calc(100% - 60px);
  overflow-y: scroll;
}

.form-main {
  height: calc(
    100% - 80px
  ); /* 将高度设置为父级容器高度减去上方固定元素的高度 */
  overflow-y: auto;
  .addtitle {
    margin-bottom: 50px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
  }

  .product-img {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    .product-img-box {
      position: relative;
      .i2 {
        position: absolute;
        right: -1px;
        top: -5px;
      }
    }
    .uploadPic {
      width: 80px;
      height: 80px;
      // margin-left: 10px;
      background: #eeeeee;
      border-radius: 8px;
      position: relative;

      .i1 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    img {
      width: 80px;
      height: 80px;
      margin-right: 13px;
    }
  }
}
</style>
